import React, { useEffect, useState } from 'react';
import './submitwalletdialog.css'
import icon_wallet_notify from '@/assets/icon_wallet_notify.png'
import icon_close from '@/assets/icon_close.png'
import { Mask } from 'antd-mobile';

export default function SubmitWalletDialog({ visible, onConfirm, onClose, walletList = [] }) {

    const [needDisplay, setNeedDisplay] = useState(false);

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])

    const onHandleCancelClick = () => {
        onClose && onClose()
    }

    const onHandleConfimrClick = () => {
        onConfirm && onConfirm()
    }

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className="submitWalletDialogOverlayBg">
                <div className="submitWalletDialogOverlayContent">

                    <img className="submitWalletDialogOverlayIcon" src={icon_wallet_notify} alt="" />

                    <div className="submitWalletDialogOverlayContentRowHeaderCenter">
                        <span className='submitWalletDialogOverlayTitle'>Êtes-vous sûr de vouloir supprimer ce portefeuille électronique mobile ?</span>
                    </div>

                    <div className="submitWalletDialogWalletContent">
                        {/* 已绑卡列表 */}
                        {walletList && walletList.map((value, index) => {
                            return (
                                <div className="submitWalletDialogItemList proofMarginTop16Px" key={index}>
                                    <div className="submitWalletDialogItemWalletRowContent">
                                        <img className="submitWalletDialogItemWalletLogo" src={value.walletLogo} alt="" />
                                        <div className="submitWalletDialogItemWalletDetailContent">
                                            <span className="submitWalletDialogItemWalletDetailType">{value.walletDesc}</span>
                                            <span className="submitWalletDialogItemWalletDetailMobile">{value.walletMobile}</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>

                    <div className="submitWalletDialogOverlayButtonContent" >
                        <div className='submitWalletDialogOverlayConfirmContent' onClick={onHandleConfimrClick}>
                            Soumettre
                        </div>
                    </div>

                    <img className="submitWalletDialogOverlayIconClose" src={icon_close} alt="" onClick={onHandleCancelClick} />

                </div>
            </div>
        </Mask >
    );
};
